import React, {lazy,Suspense} from "react";
// 导入路由组件
import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";

// 导入首页和城市选择两个组件
import Home from "./pages/Home";
import AuthRoute from './components/AuthRoute'
const CityList = lazy(()=> import('./pages/CityList'))
const Map = lazy(()=> import('./pages/Map'))
const HouseDetail = lazy(()=> import('./pages/HouseDetail'))
const Login = lazy(()=> import('./pages/Login'))
const Registe = lazy(()=> import('./pages/Registe'))
const Favorate = lazy(()=> import('./pages/Favorate'))
const Rent = lazy(()=> import('./pages/Rent'))
const RentAdd = lazy(()=> import('./pages/Rent/Add'))
const RentSearch = lazy(()=> import('./pages/Rent/Search'))


function App() {
  return (
    <Router>
       <Suspense fallback={<div className="route_Loading">Loading...</div>}>
      <div className="App">
        {/* 设置默认路由组件，实现路由重定项 */}
        <Route exact path="/" render={() => <Redirect to="/home" />}></Route>
        {/* 配置路由 */}
        <Route path="/home" component={Home}></Route>
        <Route path="/citylist" component={CityList}></Route>
        <Route path="/map" component={Map}></Route>
        {/* 房源详情页面路由规则 */}
        <Route path="/detail/:id" component={HouseDetail} />
        {/* 登录路由规则 */}
        <Route path="/login" component={Login}/>
        {/* 注册路由规则 */}
        <Route path="/registe" component={Registe}/>
        {/* 收藏路由规则 */}
        <AuthRoute path="/favorate" component={Favorate}/>
        {/* 去出租 */}
        <AuthRoute exact path="/rent" component={Rent} />
        <AuthRoute exact path="/rent/add" component={RentAdd} />
        <AuthRoute exact path="/rent/search" component={RentSearch} />
      </div>
      </Suspense>
    </Router>
  );
}

export default App;
